<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-20 09:08:19
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-24 11:28:56
 * @FilePath: \projectOne\myapp\src\components\Allin_component\Allin_register.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="el-form-content">
        <el-form :model="form">

            <el-form-item>
                <el-select v-model="form.region" placeholder="请选择你的国家和地区">
                    <el-option :label="data.name" :value="data.name" v-for="data in datalist" :key="data.ProID" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item style="margin-bottom: 10px;">
                <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
            <el-checkbox v-model="checked" style="margin:0 5px 10px 0;" />
            <p>
                <span>已阅读并同意小米账号 </span>
                <a href="">用户政策</a>
                <span>和</span>
                <a href="">隐私协议</a>
            </p>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import axios from 'axios'
import { useRouter } from 'vue-router';
import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
const form = reactive({
    username: "",
    password: "",
    region: ""

})
const router = useRouter()
const datalist = ref([])
onBeforeMount(async () => {
    await axios.get("../../json/chinaState.json").then(res => {
        // console.log(res.data)
        datalist.value = res.data
    })
})
const checked = ref(false)
const onSubmit = async () => {
    if (checked.value === false) {
        alert("请勾选用户协议！")
        return
    } else {
        if (form.region === "") {
            alert("地址地区不能为空")
            return
        }
        else if (form.username === "") {
            alert("用户名不能为空")
            return
        } else if (form.password === "") {
            alert("密码不能为空")
            return
        } else if (form.username === "" && form.password === "") {
            alert("用户名和密码不能为空")
            return
        } else {
            await axios({
                method: "POST",
                url: "http://localhost:3030/Allin/register",
                data: {
                    username: form.username,
                    password: form.password,
                    address: form.region
                }
            }).then(res => {
                if (res.data.ok === 1) {
                    alert("注册成功")
                    form.username = ""
                    form.password = ""
                    form.region = ""
                    checked.value = false
                } else {
                    alert("注册失败")
                    form.username = ""
                    form.password = ""
                    form.region = ""
                    checked.value = false
                }
            })
        }

    }


}
</script>

<style lang="scss" scoped>
.el-form-content {
    margin-top: 40px;

    .el-form {

        .el-form-item {
            margin-bottom: 30px;

            .el-input {
                height: 50px;
            }

            .el-button {
                width: 356px;
                height: 60px;
                background: #ffbe99;
                border: none;
                font-size: 20px;
                font-weight: 500;
            }
            .el-button:hover{
                background: orangered;
            }
        }

        p {
            display: inline-block;

            span {
                margin: 0 5px;
                font-weight: 600;
                color: #ccc;
            }

            a {
                text-decoration: none;
                font-weight: 500;
                color: black;
            }
        }
    }
}
</style>